<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侦听 reactive 类型的变量</title>
</head>
<body>
<div id="app">
    <h1>姓名：{{ person.name }}</h1>
    <h1>年龄：{{ person.age }}</h1>
    <h1>性别：{{ person.gender }}</h1>

    <button v-on:click="changeName">修改姓名</button>
    <button v-on:click="person.age +=1">修改年龄</button>
    <button v-on:click="changeGender">修改性别</button>
    <button v-on:click="addScore">添加成绩</button>
</div>
<script type="module">
    import {createApp, reactive, watch} from "../../../../../js/vue.esm-browser.js";

    const app = createApp({
        setup() {
            let person = reactive({
                name: "abcque",
                age: 18,
                gender: "M",
            })

            function changeName() {
                person.name += "~"
            }

            function changeGender() {
                if (person.gender === 'M')
                    person.gender = 'W'
                else
                    person.gender = 'M'
            }

            function addScore() {
                person.score = {
                    math: 98,
                    chinese: 90,
                    c: 100,
                }
            }

            /*// 直接处理 变量，与 deep 选项无关
            // watch(person,function () {
            //     console.log("person 发生了变化");
            // }, {deep:true})

            // watch(person,function () {
            //     console.log("person 发生了变化");
            // }, {deep:false})*/

            // watch(
            //     () => person,
            //     function () {
            //         console.log("person 发生了变化");
            //     },
            //     {deep:false}
            // )

            // 返回返回形式处理变量，与deep 选项有关。
            // watch(
            //     () => person,
            //     function () {
            //         console.log("person 发生了变化");
            //     },
            //     {deep:true}
            // )


            watch(person,function () {
                console.log("person 发生了变化");
            }, {deep:true})
            return {
                person,changeName, changeGender,addScore
            }
        }
    })

    app.mount("#app")
</script>
</body>
</html>